<template> 
    <!-- 例假申请info组件 -->
    <div class="hol-leave-info">
        <group class="none-bottom-border">
            <cell-box class="cellbox-item">
                <flexbox>
                    <flexbox-item class="title" :span="4">
                        原例假日期<span class="require-item">*</span>
                    </flexbox-item>
                    <flexbox-item class="value date-pciker" :span="8">
                        <datetime v-model="startDate"
                        :start-date="datePickerConfig.startDateConfig.startDate"
                        :end-date="datePickerConfig.startDateConfig.endDate"
                        placeholder="请选择原例假日期" :format="datePickerConfig.format"
                        :min-hour="datePickerConfig.workStartHour"
                        :max-hour="datePickerConfig.workEndHour"
                        :minuteList="datePickerConfig.startDateConfig.minuteList"
                        @on-change="dateChange('startDate')"
                        ref="startDateDom"
                        clear-text="请选择原例假日期" class="datetime"></datetime>
                    </flexbox-item>
                </flexbox>
            </cell-box>
            <cell-box class="cellbox-item">
                <flexbox>
                    <flexbox-item class="title" :span="4">
                        更改例假日期<span class="require-item">*</span>
                    </flexbox-item>
                    <flexbox-item class="value date-pciker" :span="8">
                        <datetime v-model="endDate"
                        :start-date="datePickerConfig.endDateConfig.startDate"
                        placeholder="请选择更改例假日期" :format="datePickerConfig.format"
                        :max-hour="datePickerConfig.workEndHour"
                        :min-hour="datePickerConfig.workStartHour"
                        :minuteList="datePickerConfig.endDateConfig.minuteList"
                        @on-change="dateChange('endDate')"
                        ref="endDateDom"
                        clear-text="更改例假日期" class="datetime"></datetime>
                    </flexbox-item>
                </flexbox>
            </cell-box>
            <cell-box class="cellbox-item">
                <flexbox>
                    <flexbox-item class="title" :span="4">
                        原因<span class="require-item">*</span>
                    </flexbox-item>
                    <flexbox-item class="value" :span="8">
                        <x-textarea class="apply-reason" v-model="reasonText" :placeholder="'请输入原因'"></x-textarea>
                    </flexbox-item>
                </flexbox>
            </cell-box>
            <cell-box class="cellbox-item" v-if="changeApplyType === '修改申请原因'">
                <flexbox>
                <flexbox-item class="title" :span="4">
                    修改申请原因<span class="require-item">*</span>
                </flexbox-item>
                <flexbox-item class="value" :span="8">
                    <x-textarea class="apply-reason" v-model="editApplyReason" :placeholder="'请输入修改申请原因'"></x-textarea>
                </flexbox-item>
                </flexbox>
            </cell-box>
            <cell-box class="cellbox-item" v-if="changeApplyType === '重新申请原因'">
                <flexbox>
                <flexbox-item class="title" :span="4">
                    重新申请原因<span class="require-item">*</span>
                </flexbox-item>
                <flexbox-item class="value" :span="8">
                    <x-textarea class="apply-reason" v-model="reApplyReason" :placeholder="'请输入重新申请原因'"></x-textarea>
                </flexbox-item>
                </flexbox>
            </cell-box>
        </group>
    </div>
</template>

<script>
import { Group, CellBox, Flexbox, FlexboxItem, XTextarea, Datetime, Toast, Previewer, dateFormat } from 'vux';
import qs from 'qs'; 
export default {
    name: 'HolLeaveInfo',
    data() {
        return {
            startDate: '',
            endDate: '',
            datePickerConfig: {
                format: 'YYYY-MM-DD HH:mm', // 日期格式
                workEndHour: 18, // 下班時間
                workStartHour: 9, // 上班時間
                startDateConfig: {
                    startDate: '',
                    endDate: '',
                    minuteList: ['00', '15', '30', '45']
                },
                endDateConfig: {
                    startDate: '',
                    endDate: '',
                    minuteList: ['00', '15', '30', '45']
                }
            },
            reasonText: '',   // 請假原因，【提交】
            reApplyReasonShow: false,
            reApplyReason: '',      // 重新申請原因
            editApplyReason: '',    // 修改申請原因
            changeApplyType: '',
            uploadContentReminder:'' //上传内容提示
        }
    },
    components: {
      Group,
      CellBox,
      Flexbox,
      FlexboxItem,
      XTextarea,
      Datetime,
      Toast,
      Previewer
    },
    methods: {
        // 日期更改時的回調
        dateChange: function (dateType) {
            let startDate = this.formatDateToYYYYMMDD(this.startDate);
            let endDate = this.formatDateToYYYYMMDD(this.endDate);
            if (endDate) {
                this.datePickerConfig.startDateConfig.endDate = endDate;
            } else {
                this.datePickerConfig.startDateConfig.endDate = '';
            }
            if (startDate) {
                this.datePickerConfig.endDateConfig.startDate = startDate;
            }
            this.checkDateRange();
        },
        formatDateToYYYYMMDD: function (date) {
            if (!date) return;
            return dateFormat(date, 'YYYY-MM-DD');
        },
        // 檢查請假開始日期是否大於請假結束日期
        checkDateRange: function () {
            let startDate = new Date(this.startDate.replace(/ /g, 'T'));
            let endDate = new Date(this.endDate.replace(/ /g, 'T'));
            if (startDate > endDate) {
                this.endDate = '';
                this.$refs.endDateDom.currentValue = this.endDate;
                this.$parent.turndownText = '原例假日期不能大于更改例假日期';
                this.$parent.turndownShow = true;
            }
        },
    },
}
</script>

<style lang="scss" scoped>
    @import '../../assets/style/variable';
    .cellbox-item{
        padding: 0 15px;
        &:before{
        border-color: #e6e6e6;
        }
        .title{
            color: #666;
            font-size: getRem(28);
            padding: getRem(32) 0;
        }
        .value{
            font-size: getRem(28);
        }
        .date-pciker{
            padding: getRem(32) 0;
            a{
                padding: getRem(32) 0;
                display: inline;
                // padding: 0;
                color: #ddd;
                &:before{
                content: none;
                }
            }
            .has-value{
                color: #333;
            }
            .separation-symbol{
                color: #666;
            }
        }
        .apply-reason{
            padding: getRem(32) 0;
        }
    }
    .vux-flexbox{
        align-items: flex-start;
    }
</style>